<!DOCTYPE html>
<html lang="en">

<head>
    <title>选择挑战房间</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <!-- <meta http-equiv="refresh" content="5"> -->
    <script src="../../js/jquery-3.2.1.min.js"></script>

    <link rel="stylesheet" href="../../css/public.css">
    <style>
        .register_bg {
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            background: url('../../images/reg/bg.png') center no-repeat;
            background-size: 100%;
            z-index: 1;
        }
        .home_zhangdui_nav {
            padding-left: 15%;
            overflow: hidden;
            background: #021349 url('../../images/reg/back.png') 10px center no-repeat;
            background-size: .7rem;
        }

        .search {
            margin-top: 5px;
            float: right;
            height: 45px;
            width: 45px;
            margin-right: 5px;
            color: #FAE7A5;
            background: url(../../images/home/search.png)center no-repeat;
            background-size: 0.6rem;
        }
        
        .room{
            width: 100%;
            margin:0 auto;
            margin-top: .6rem;
        }
        .room ul{
            width: 100%;
            height: 12500px;
            margin-left:2.5%;
        }
        .room ul li{
            float: left;
            width: 30%;
            height: 105px;
            margin-right:2.5%;
            margin-bottom: 16px;
            position: relative;
        }
        .bg_room_bottom{
            background: url(../../images/home/bg_room_bottom.png) no-repeat;
            background-size: 100% 100%;
        }
        .bg_room_bottom1{
            background: url(../../images/home/bg_room_bottom1.png) no-repeat;
            background-size: 100% 100%;
        }
        .number{
            width: 60%;
            text-align: center;
            position: absolute;
            top: 20%;
            left: 20%;
            color: #BFC1F2;
            font-size: 16px;
        }
        .vs{
            width: 20px;
            height: 25px;
            display: inline-block;
            background: url(../../images/home/icon_team_guess_record_vs.png) no-repeat;
            background-size: 0.4rem;
            background-position: 0.12rem 0.25rem;
            margin-left: 12%;
            /*padding-top: -10%;*/
            margin-right: 15%;
        }
        .room_number{
            width: 100%;
            margin:0 auto;
            text-align: center;
            font-size: 12px;
            color: #FFCD29;
            /*line-height: 140px;*/
            margin-top: 63px;
        }
        .bg_room_bottom .pwd {
            text-align: center;
            margin: 3px;
        }
        .bg_room_bottom .pwd input {
            margin-bottom: 2px;
            width: 50px;
            background-color: transparent;
            border:none;
            font-size: 13px;
            color: #fff;
        }
        .sofa{
            width: 13px;
            height: 12px;
        }
        .ModalFrame{
            position: fixed;
            top: 0;
            bottom: 0;
            width: 100%;
            height: 1000px;
            background: rgba(0,0,0,0.5);
            z-index: 150;
        }
        .popUp{
            width: 75%;
            height: 180px;
            margin:0 auto;
            background: #1b1d68;
            margin-top: 225px;
            text-align: center;
        }
        .popUp_title{
            width: 100%;
            text-align: center;
            height: 50px;
            line-height: 50px;
            color: #EAE3FF;
            font-size: .5rem;
        }
        .popUp_input{
            width: 90%;
            margin:0 auto;
            height: 40px;
            border:none;
            background: #121459;
            color: #D0C7EF;
            font-size: 0.4rem;
            text-align: center;

        }
        .cancel{
            width: 35%;
            height: 34px;
            line-height: 34px;
            text-align: center;
            color: #D0C7EF;
            font-size: .4rem;
            background: #1B1D68;
            border:1px solid #6C6FC7;
            margin-top: 30px;
            margin-left: 0; 
            border-radius: 4px;
        }
        .confirm{
            width: 35%;
            height: 34px;
            line-height: 34px;
            text-align: center;
            color: #D0C7EF;
            font-size: .4rem;
            background: #1B1D68;
            border:1px solid #6C6FC7;
            margin-top: 30px;
            margin-left: 16%;
            border-radius: 4px;
        }
        .tabs {
            box-sizing:border-box;
            margin-top: 50px;
            height: 50px;
            font-size: .4rem;
        }
        .tabs ul {
            overflow: hidden;
            border-bottom: 1px solid #24254E;
        }
        .tabs ul li {
            float: left;
            width: 50%;
            text-align: center;
        }
        .tabs ul li:first-child span{
            border-right: 1px solid #24254E;
        }
        .tabs ul li span {
            display: block;
            line-height: 50px;
            color: #BFC1F2;
        }
        .tabs ul li.active span {
            color: #FFB400;
        }
    </style>
</head>

<body>
    <div class="register_bg">
        <div class="home_zhangdui_nav">
            <span class="goBack"></span>
            选择挑战房间
            <!-- <a href="./tradingRecord.html"> -->
                <span class="search"></span>
            <!-- </a> -->
        </div>
        <div class="tabs">
            <ul>
                <li class="active" id="roomlist1"><span>大厅房间</span></li>
                <li id="roomlist2"><span>加密房间</span></li>
            </ul>
        </div>
        <div class="tabs-ct">
            <div class="room">
                <ul id="list" class="listroom">
                </ul>
            </div>
            <div class="room">
                <ul class="roompsw" id="list2">
                </ul>
            </div>
        </div>
    </div>

    <div class="ModalFrame" style="display: none">
        <div class="popUp">
            <p class="popUp_title">输入房间密码</p>
            <input type="text" name="" class="popUp_input" placeholder="请输入数字" onkeyup="value=value.replace(/[^\d]/g,'')"></br>
            <button class="cancel">取消</button>
            <button class="confirm">确定</button>
        </div>
    </div>
    <script src="../../js/jquery-3.2.1.min.js"></script>
    <script src="../../js/public.js"></script>
    <script>
    $(function(){
        //tabs
        $('.tabs li').bind('click', function () {
            var index = $(this).index();
            var ct = $('.tabs-ct > .room');
            $(this).parent().children('li').attr('class', '');
            $(this).attr('class', 'active'); 
            ct.hide();
            ct.eq(index).show();
        });
    }) 
    $(function(){
        var user_type = localStorage.usertype;
        //发布者若加密,显示密码
        if(user_type== 1){
            $.post(listWarsUrl, {
                mode: 1
                }, (res) => {
                console.log(res)
                if (res.code == 0) {
                    res.obj.forEach((item, index) => {
                        //console.log(item.fdRoomNo);
                        item.fdNum = item.fdNum.substr(0, 1);
                        let homeStm =`<li class="bg_room_bottom" data="${item.fdRoomNo}" >
                                <div class="number">${item.fdNum}
                                    <span class="vs"></span>${item.fdNum}
                                </div>
                                <div class="room_number">
                                    <img src="../../images/home/icon_team_guess_room_sofa.png" class="sofa">
                                    <span>${item.fdRoomNo}</span>
                                </div>
                                <div class='pwd'><span>密码:</span><input type="text" name="" value="${item.fdPwd}" readonly="readonly" class="pwdnum"></div>
                            </li>`;
                        $('#list2').append(homeStm);
                    });             
                }
            });
            $('.room .roompsw').on('click', 'li', function(){
                var id = $(this).attr('data');
                $('.pwdnum').trigger('select');
                document.execCommand('copy');
                alert("密码复制成功！");
                window.location.href='./tzzj.html?id='+id;
            })
        }else {
            //挑战者不显示密码
            $.post(listWarsUrl, {
                mode: 1
                }, (res) => {
                console.log(res)
                if (res.code == 0) {
                    res.obj.forEach((item, index) => {
                        //console.log(item.fdRoomNo);
                        item.fdNum = item.fdNum.substr(0, 1);
                        let homeStm =`<li class="bg_room_bottom" data="${item.fdRoomNo}" >
                                <div class="number">${item.fdNum}
                                    <span class="vs"></span>${item.fdNum}
                                </div>
                                <div class="room_number">
                                    <img src="../../images/home/icon_team_guess_room_sofa.png" class="sofa">
                                    <span>${item.fdRoomNo}</span>
                                </div>
                            </li>`;
                        $('#list2').append(homeStm);
                    });             
                }
            });
            $('.room .roompsw').on('click', 'li', function(){
                var id = $(this).attr('data');
                window.location.href='./tzzj.html?id='+id;
            })
        }
        //大厅房间
        $.post(listWarsUrl, {
            mode: 0
            }, (res) => {
            console.log(res)
             if (res.code == 0) {
                res.obj.forEach((item, index) => {
                    //console.log(item.fdRoomNo);
                    item.fdNum = item.fdNum.substr(0, 1);
                    let homeStm =`<li class="bg_room_bottom" data="${item.fdRoomNo}">
                            <div class="number">${item.fdNum}
                                <span class="vs"></span>${item.fdNum}
                            </div>
                            <div class="room_number">
                                <img src="../../images/home/icon_team_guess_room_sofa.png" class="sofa">
                                <span>${item.fdRoomNo}</span>
                            </div>
                        </li>`;
                    $('#list').append(homeStm);
                });             
            }
        });
        $('.room #list').on('click', 'li', function(){
            var id = $(this).attr('data');
            window.location.href='./tzzj.html?id='+id;
        })
    })
    </script>
</body>
</html>